<template>
  <!-- 看点列表 -->
  <div class="box">
    <heads></heads>
    <div class="tit">
      <div class="list">
        <div class="li" style="cursor: pointer;" @click="() => { $router.push('/') }">
          <img src="../../assets/logo.png" />
          <!-- <span>帮帮同城</span> -->
        </div>
        <div class="sousuo">
          <input type="text" v-model="searchtext" @keyup.enter="search" placeholder="请输入您要找的内容" />
          <p class="el-icon-search" @click="search()"></p>
        </div>
      </div>
    </div>
    <div class="titLiat">
      <div @click="titClick(index)" :class="xuanzhong == index ? 'li cur' : 'li'" v-for="(item, index) in list" :key="index">
        <p>{{ item.name }}</p>
        <img v-if="index == xuanzhong" src="../../assets/xuanzhong.png" />
      </div>
    </div>
    <div class="list1">
      <div class="li" v-for="(item, index) in watchList" :key="index" style="cursor: pointer;" @click="details(item.id)">
        <img class="img" :src="img + item.image" />
        <div class="wenzi">
          <p class="p1">{{ item.title }}</p>
          <p class="p6">
            <span>{{ item.author }}</span>
            <span>{{ item.createDate }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="fenye" v-if="pageshow">
      <el-pagination background layout="prev, pager, next" :total="total" :current-page="Page.PageNo"
        @current-change="CurrentChange">
      </el-pagination>
    </div>
    <floor></floor>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
export default {
  components: {
    floor,
    heads
  },
  data() {
    return {
      pageshow: true,
      xuanzhong: 0,
      list: [
        { num: 0, name: "全部" },
        { num: 1, name: "购房经验" },
        { num: 2, name: "政策类型" },
        { num: 3, name: "楼市行情" },
        // { num: 4, name: "门店动态" }
      ],
      Page: {
        pageSize: 10,
        pageNo: 1,
        keyword: ''
      },
      watchList: [],
      img: this.$img,
      total: 0,
    };
  },
  mounted() { },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getWatch()
    },
    getWatch() {
      this.$getHttp("/mob/home/getWatch", this.Page).then((data) => {
        if (data.code == 200) {
          this.watchList = data.list
          this.total = data.count
        }
      });
    },
    titClick(index) {
      this.xuanzhong = index
      this.Page = {
        pageSize: 10,
        pageNo: 1,
        type: index,
      }
      if (index == 0) delete this.Page.type
      this.pageshow = false
      this.$nextTick(() => {
        this.pageshow = true
      })
      this.getWatch()
    },
    search() {
      if (this.searchtext.trim() != '') {
        this.Page.pageNo = '1'
        this.Page.keyword = this.searchtext
        this.getWatch()
      }
      // this.openUrl({
      //   path: "/index/houseSearch",
      //   query: {
      //     search: this.searchtext,
      //   },
      // });
    },
    details(id) {
      this.openUrl({
        path: "/index/particulars",
        query: {
          type: 'watch',
          id: id
        }
      });
    },
    CurrentChange(e) {
      this.Page.pageNo = e
      this.watchList = []
      this.getWatch()
    },
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.tit {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      width: 600px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;
      margin-left: 300px;

      // margin-top: 28px;
      input {
        width: 480px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }
  }
}

.list1 {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 33px;

  .li {
    position: relative;
    margin-bottom: 32px;

    .img {
      width: 300px;
      height: 200px;
    }

    .wenzi {
      display: inline-block;
      vertical-align: top;
      width: 876px;
      height: 154px;
      margin-left: 14px;

      .p1 {
        font-size: 20px;
        color: #333333;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .p6 {
        position: absolute;
        bottom: 0;
        color: #333333;

        span {
          font-size: 20px;
          display: block;
          margin-top: 10px;
        }
      }
    }
  }
}

.titLiat {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;

  .li {
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
    color: #333;
    cursor: pointer;

    p {
      font-size: 26px;
    }

    img {
      width: 40px;
      height: 20px;
      margin-left: 50%;
      transform: translateX(-50%);
    }
  }

  .cur {
    color: #64b6a8;
    border: 0;
    transform: scale(1.1);
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin-bottom: 60px;
  margin-top: 60px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}</style>